<template>
  <div class="user-manage-container table-view-box">
    <div class="table-tools-box">
      <div class="tools-search-box">
        <a-form-model
          ref="queryFormRef"
          class="table-query-box"
          :model="queryForm"
          :label-col="formLayout.labelCol"
          :wrapper-col="formLayout.wrapperCol">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="姓名">
                <a-input v-model="queryForm.name" placeholder="请输入姓名"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="学历">
                <a-select
                  v-model="queryForm.education"
                  allow-clear
                  placeholder="请选择学历"
                >
                  <a-select-option v-for="eduItem in educations"
                    :key="eduItem.id"
                    :value="eduItem.value">
                    {{ eduItem.value }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="状态">
                <a-select
                  v-model="queryForm.status"
                  allow-clear
                  placeholder="请选择状态"
                >
                  <a-select-option :value="0">
                    正常
                  </a-select-option>
                  <a-select-option :value="1">
                    异常
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="是否锁定">
                <a-select
                  v-model="queryForm.isLock"
                  allow-clear
                  placeholder="请选择"
                >
                  <a-select-option :value="0">
                    正常
                  </a-select-option>
                  <a-select-option :value="1">
                    锁定
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="tools-btn-box">
        <div class="btn-box-left">
          <a-button class="tools-item tools-btn" type="primary" @click="handleAddUser">新增</a-button>
          <a-button class="tools-item tools-btn" type="primary" @click="handleEditUser">编辑</a-button>
          <a-button class="tools-item tools-btn" type="danger" @click="handleDeleteUser">删除</a-button>
        </div>
        <div class="btn-box-right">
          <a-button class="tools-item tools-btn" type="primary" @click="handleSearch">查询</a-button>
          <a-button class="tools-item tools-btn" type="primary" @click="handleReset">重置</a-button>
        </div>
      </div>
    </div>
    <div class="table-body-box">
      <a-table
        bordered
        :rowKey="rowKey"
        :key="tableSetting.key"
        :columns="tableColumns"
        :loading="tableSetting.loading"
        :dataSource="tableDataSource"
        :pagination="pagination"
        :scroll="{ y: 600 }"
        :rowSelection="{
          selectedRowKeys: tableSetting.selectedRowKeys,
          onChange: onTabalRowChange
        }"
        @change="handleTableChange">
      </a-table>
    </div>
    <UserModal
      ref="userAddModal"
      model='add'
      :visible="addModalVisible"
      @success='handleAddUserSuccess'
      @cancel='addModalVisible = false'/>

    <UserModal
      ref="userEditModal"
      model='edit'
      :visible="editModalVisible"
      @success='handleEditUserSuccess'
      @cancel='editModalVisible = false'/>
  </div>
</template>

<script>
import { userList } from '@/mock/user-data'
import { pagination } from "@/common/setting"
import { educations } from '@/enum/enum-common'
import UserModal from './components/UserAddModal'

const defaultQueryForm = {
  name: '',
  education: undefined,
  status: undefined,
  isLock: undefined,
}

export default {
  name: 'UserManageView',
  components: {
    UserModal
  },
  data() {
    return {
      rowKey: 'id',
      tableSetting: {
        key: +new Date(),
        loading: false,
        selectedRows: [],
        selectedRowKeys: []
      },
      pagination: pagination(),
      tableDataSource: [],
      tableColumns: [
        {
          title: '序号',
          width: 65,
          align: "center",
          customRender: (text, record, index) => {
            const { pagination: { current, pageSize } } = this
            return (current - 1) * pageSize + (index + 1)
          }
        },
        {
          title: "姓名",
          dataIndex: "name",
          align: "left"
        },
        {
          title: "年龄",
          dataIndex: "age",
          width: 80,
          align: "center"
        },
        {
          title: "学历",
          dataIndex: "education",
          align: "center",
          width: 80
        },
        {
          title: "分数",
          dataIndex: "score",
          align: "center",
          width: 80
        },
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: 100,
          customRender: (text, record, index) => {
            return text == 1 ? '异常' : '正常'
          }
        },
        {
          title: "是否锁定",
          dataIndex: "isLock",
          align: "center",
          width: 100,
          customRender: (text, record, index) => {
            return text == 1 ? '锁定' : '正常'
          }
        },
        {
          title: "家庭住址",
          dataIndex: "address",
          align: "left",
        },
        {
          title: "出生日期",
          dataIndex: "birthday",
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          align: "center",
        },
      ],
      queryForm: {...defaultQueryForm},
      formLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 }
      },
      addModalVisible: false,
      editModalVisible: false,
    }
  },
  computed: {
    educations () {
      return educations.map((item, index) => {
        return {
          id: index + 1,
          value: item
        }
      })
    },
  },
  mounted () {
    this.tableDataSource = [...userList]
  },
  methods: {
    /** 表格前置选中框选择 */
    onTabalRowChange (selectedRowKeys, selectedRows) {
      this.tableSetting.selectedRowKeys = selectedRowKeys
      this.tableSetting.selectedRows = selectedRows
    },
    /** 表格数据变化 */
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
    },
    /** 查询 */
    handleSearch () {
      const queryParams = {...this.queryForm}
      console.log('queryParams', queryParams)
    },
    /** 重置 */
    handleReset () {
      this.queryForm = [...defaultQueryForm]
    },
    /** 添加 */
    handleAddUser () {
      this.addModalVisible = true
    },
    /** 添加成功回调 */
    handleAddUserSuccess (userItem) {
      this.addModalVisible = false
      let tableDataSource = [...this.tableDataSource]
      this.tableDataSource = [...tableDataSource, userItem]
    },
    /** 修改 */
    handleEditUser () {
      const { selectedRows } = this.tableSetting
      if (selectedRows && selectedRows.length === 1) {
        this.editModalVisible = true
        this.$refs.userEditModal.handleSetForm({...selectedRows[0]})
      } else {
        this.$warning({
          title: '提示',
          content: "请选择一条数据进行操作！",
          okText: "确定"
        });
      }
    },
    /** 修改成功回调 */
    handleEditUserSuccess (userItem) {
      this.editModalVisible = false
      const { rowKey } = this
      const newDataSource = [...this.tableDataSource]
      let target = newDataSource.filter(item => item[rowKey] == userItem[rowKey])[0]
      if (target) {
        this.tableDataSource = newDataSource.map(item => {
          if (item[rowKey] == userItem[rowKey]) {
            return userItem
          } else {
            return item
          }
        })
      }
      this.tableSetting.selectedRows = []
      this.tableSetting.selectedRowKeys = []
    },
    /** 删除 */
    handleDeleteUser () {
      const _this = this
      const { selectedRowKeys } = _this.tableSetting
      if (selectedRowKeys && selectedRowKeys.length > 0) {
        _this.$confirm({
          title: '系统提示',
          content: '确定需要删除所选数据？',
          onOk() {
            let resData = [..._this.tableDataSource]
            selectedRowKeys.forEach(element => {
              resData = resData.filter(item => item.id !== element)
            })
            _this.tableDataSource = resData
          },
          onCancel() {
          },
        })
      } else {
        this.$warning({
          title: '系统提示',
          content: "请选择需要操作数据！",
          okText: "确定"
        })
        return false
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.user-manage-container {
  height: 100%;
}
.table-view-box {
  padding-top: 10px;
  .table-tools-box {
    .tools-btn-box {
      display: flex;
      margin-top: 10px;
      .btn-box-right {
        margin-left: auto;
      }
    }
    .tools-item {
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .table-body-box {
    margin-top: 10px;
  }
  .table-query-box {
    ::v-deep.ant-form-item {
      margin-bottom: 12px;
    }
  }
}
</style>